<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type=text/javascript src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<child v-model:key1="key1" v-model:value="value"></child>
		</div>
		<script>
		
		/*
		子组件必须接受父组件传过来的值
		子组件必须使用update:变量名 往外暴露一个事件
		父组件中调用必须为v-model：名字来调用
		*/
		const {h, ref, computed, onMounted, reactive} = Vue;
		const child = {
			props: ['key1','value'],
			setup(props, { expose, emit }) {
			  console.log("props = ",props);
		      
			  onMounted(function tt(){
				  console.log("the child is onMounted");
			  })
			  
			  const handleClick = () => {
			  	// 参数1：通知父组件修改值的方法名
			  	// 参数2：要修改的值
				
			  	emit('update:key1', '新的key')
				emit('update:value','新的value')
			  }
			  return {handleClick}
			},
			methods:{
				
			},
			template:`<button @click="handleClick">{{key1}},{{value}}</button>`
		}
		
		const App = {
		    setup(){
		        // 为目标对象创建一个响应式对象
				const key1 = ref('111')
				const value = ref('222')
				onMounted(() => {
					console.log("the parent is onMounted");
					
				})
				return {key1,value}
		        
		    },
			components:{
				child
			},
			methods:{
				
			}
		};
		const app = Vue.createApp(App);
		app.mount('#app');
		
		
		</script>
	</body>
</html>
